<template>
  <div class="return-detail">
    <div v-if="returnOrder" class="detail-content">
      <!-- 退货单基本信息 -->
      <div class="detail-section">
        <h3>退货单基本信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <label>退货单编号</label>
            <span class="return-code">{{ returnOrder.returnCode }}</span>
          </div>
          <div class="info-item">
            <label>原订单编号</label>
            <span class="original-order-code">{{ returnOrder.originalOrderCode }}</span>
          </div>
          <div class="info-item">
            <label>退货状态</label>
            <span class="status" :class="(returnOrder.returnStatus || returnOrder.status || '').toLowerCase()">
              {{ getStatusText(returnOrder.returnStatus || returnOrder.status) }}
            </span>
          </div>
          <div class="info-item">
            <label>创建时间</label>
            <span>{{ formatDate(returnOrder.returnDate) }}</span>
          </div>
        </div>
      </div>

      <!-- 客户信息 -->
      <div class="detail-section">
        <h3>客户信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <label>客户姓名</label>
            <span>{{ returnOrder.customerName }}</span>
          </div>
          <div class="info-item">
            <label>联系电话</label>
            <span>{{ returnOrder.customerPhone }}</span>
          </div>
          <div class="info-item">
            <label>联系人</label>
            <span>{{ returnOrder.contactName || '未填写' }}</span>
          </div>
          <div class="info-item">
            <label>联系电话</label>
            <span>{{ returnOrder.contactPhone || '未填写' }}</span>
          </div>
        </div>
      </div>

      <!-- 退货商品明细 -->
      <div class="detail-section">
        <h3>退货商品明细</h3>
        <div class="return-items">
          <div class="items-header">
            <div class="header-cell">商品名称</div>
            <div class="header-cell">商品编码</div>
            <div class="header-cell">单价</div>
            <div class="header-cell">退货数量</div>
            <div class="header-cell">商品状态</div>
            <div class="header-cell">退货金额</div>
          </div>
          <div v-for="(item, index) in returnOrder.items" :key="index" class="return-item">
            <div class="item-cell">{{ item.productName }}</div>
            <div class="item-cell">{{ item.productCode }}</div>
            <div class="item-cell">¥{{ (item.unitPrice || 0).toFixed(2) }}</div>
            <div class="item-cell">{{ item.quantity }}</div>
            <div class="item-cell">
              <span class="condition" :class="item.condition.toLowerCase()">
                {{ getConditionText(item.condition) }}
              </span>
            </div>
            <div class="item-cell">¥{{ (item.itemReturnAmount || 0).toFixed(2) }}</div>
          </div>
        </div>
      </div>

      <!-- 退货原因 -->
      <div class="detail-section">
        <h3>退货原因</h3>
        <div class="reason-content">
          <div class="reason-item">
            <label>退货原因:</label>
            <span>{{ returnOrder.reason }}</span>
          </div>
          <div v-if="returnOrder.description" class="reason-item">
            <label>详细说明:</label>
            <span>{{ returnOrder.description }}</span>
          </div>
        </div>
      </div>

      <!-- 退货汇总 -->
      <div class="detail-section">
        <h3>退货汇总</h3>
        <div class="return-summary">
          <div class="summary-row">
            <span>退货商品数量:</span>
            <span>{{ (returnOrder.items || []).reduce((sum, item) => sum + (item.quantity || 0), 0) }} 件</span>
          </div>
          <div class="summary-row">
            <span>退货商品金额:</span>
            <span>¥{{ (returnOrder.returnAmount || 0).toFixed(2) }}</span>
          </div>
          <div class="summary-row">
            <span>退款金额:</span>
            <span>¥{{ (returnOrder.refundAmount || 0).toFixed(2) }}</span>
          </div>
          <div class="summary-row">
            <span>积分退还:</span>
            <span>{{ returnOrder.pointsRefund }} 积分</span>
          </div>
        </div>
      </div>

      <!-- 处理流程 -->
      <div class="detail-section">
        <h3>处理流程</h3>
        <div class="process-timeline">
          <div v-for="(step, index) in processSteps" :key="index" class="timeline-item">
            <div class="timeline-dot" :class="step.status"></div>
            <div class="timeline-content">
              <div class="timeline-title">{{ step.title }}</div>
              <div class="timeline-time">{{ formatDateTime(step.time) }}</div>
              <div v-if="step.operator" class="timeline-operator">
                操作人: {{ step.operator }}
              </div>
              <div v-if="step.remark" class="timeline-remark">
                {{ step.remark }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 其他信息 -->
      <div class="detail-section">
        <h3>其他信息</h3>
        <div class="info-grid">
          <div v-if="returnOrder.returnAddress" class="info-item">
            <label>退货地址</label>
            <span>{{ returnOrder.returnAddress }}</span>
          </div>
          <div v-if="returnOrder.remark" class="info-item">
            <label>备注</label>
            <span>{{ returnOrder.remark }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'

export default {
  name: 'ReturnDetailView',
  props: {
    returnOrder: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const processSteps = ref([])
    
    // 获取状态文本
    const getStatusText = (status) => {
      const statuses = {
        'Pending': '待审核',
        'Approved': '已审核',
        'Processing': '处理中',
        'Completed': '已完成',
        'Rejected': '已拒绝'
      }
      return statuses[status] || status
    }
    
    // 获取商品状态文本
    const getConditionText = (condition) => {
      const conditions = {
        'Good': '良好',
        'Defective': '有缺陷',
        'Damaged': '损坏',
        'Used': '已使用'
      }
      return conditions[condition] || condition
    }
    
    // 格式化日期
    const formatDate = (date) => {
      return new Date(date).toLocaleDateString('zh-CN')
    }
    
    // 格式化日期时间
    const formatDateTime = (dateTime) => {
      return new Date(dateTime).toLocaleString('zh-CN')
    }
    
    // 加载处理流程
    const loadProcessSteps = () => {
      const steps = [
        {
          title: '退货申请已提交',
          time: props.returnOrder.returnDate,
          status: 'completed',
          operator: '客户',
          remark: '客户提交退货申请'
        }
      ]
      
      const currentStatus = props.returnOrder.returnStatus || props.returnOrder.status
      
      if (currentStatus === 'Approved' || currentStatus === 'Processing' || currentStatus === 'Completed') {
        steps.push({
          title: '退货申请已审核',
          time: props.returnOrder.approvedAt,
          status: 'completed',
          operator: props.returnOrder.approverName,
          remark: '退货申请审核通过'
        })
      }
      
      if (currentStatus === 'Processing' || currentStatus === 'Completed') {
        steps.push({
          title: '退货处理中',
          time: props.returnOrder.processedAt,
          status: 'completed',
          operator: props.returnOrder.processorName,
          remark: '开始处理退货'
        })
      }
      
      if (currentStatus === 'Completed') {
        steps.push({
          title: '退货处理完成',
          time: new Date().toISOString(),
          status: 'completed',
          operator: props.returnOrder.processorName,
          remark: '退货处理完成，已退款'
        })
      }
      
      if (currentStatus === 'Rejected') {
        steps.push({
          title: '退货申请已拒绝',
          time: new Date().toISOString(),
          status: 'rejected',
          operator: props.returnOrder.approverName,
          remark: '退货申请被拒绝'
        })
      }
      
      processSteps.value = steps
    }
    
    onMounted(() => {
      loadProcessSteps()
    })
    
    return {
      processSteps,
      getStatusText,
      getConditionText,
      formatDate,
      formatDateTime
    }
  }
}
</script>

<style scoped>
.return-detail {
  max-width: 1000px;
  margin: 0 auto;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-section {
  background: #f8fafc;
  border-radius: 8px;
  padding: 24px;
}

.detail-section h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item label {
  font-weight: 500;
  color: #4a5568;
  font-size: 0.875rem;
}

.info-item span {
  color: #2d3748;
  font-size: 0.875rem;
}

.return-code {
  font-weight: 600;
  color: #f093fb;
  font-size: 1rem;
}

.original-order-code {
  font-weight: 500;
  color: #667eea;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
}

.status.pending {
  background: #fef5e7;
  color: #744210;
}

.status.approved {
  background: #bee3f8;
  color: #1a365d;
}

.status.processing {
  background: #c6f6d5;
  color: #22543d;
}

.status.completed {
  background: #e6fffa;
  color: #234e52;
}

.status.rejected {
  background: #fed7d7;
  color: #742a2a;
}

.return-items {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}

.items-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  background: #f7fafc;
  padding: 12px 16px;
  font-weight: 600;
  color: #4a5568;
  border-bottom: 1px solid #e2e8f0;
}

.return-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
}

.return-item:last-child {
  border-bottom: none;
}

.item-cell {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #2d3748;
}

.condition {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
}

.condition.good {
  background: #c6f6d5;
  color: #22543d;
}

.condition.defective {
  background: #fef5e7;
  color: #744210;
}

.condition.damaged {
  background: #fed7d7;
  color: #742a2a;
}

.condition.used {
  background: #e2e8f0;
  color: #4a5568;
}

.reason-content {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
}

.reason-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.reason-item:last-child {
  margin-bottom: 0;
}

.reason-item label {
  font-weight: 500;
  color: #4a5568;
  min-width: 80px;
}

.reason-item span {
  color: #2d3748;
  flex: 1;
}

.return-summary {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.summary-row:last-child {
  border-bottom: none;
  border-top: 2px solid #e2e8f0;
  margin-top: 8px;
  padding-top: 12px;
  font-weight: 600;
  font-size: 1.1rem;
  color: #2d3748;
}

.process-timeline {
  position: relative;
  padding-left: 24px;
}

.process-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
}

.timeline-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: white;
}

.timeline-dot.completed {
  background: #48bb78;
  border-color: #48bb78;
}

.timeline-dot.rejected {
  background: #f56565;
  border-color: #f56565;
}

.timeline-dot.pending {
  background: #ed8936;
  border-color: #ed8936;
}

.timeline-content {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
}

.timeline-title {
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 4px;
}

.timeline-time {
  font-size: 0.875rem;
  color: #718096;
  margin-bottom: 4px;
}

.timeline-operator {
  font-size: 0.875rem;
  color: #4a5568;
  margin-bottom: 4px;
}

.timeline-remark {
  font-size: 0.875rem;
  color: #718096;
  font-style: italic;
}

@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .items-header,
  .return-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .items-header {
    display: none;
  }
  
  .return-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .item-cell::before {
    content: attr(data-label) ': ';
    font-weight: 500;
    color: #4a5568;
  }
}
</style>
